<template>
    <view class="page-register-index">
        <view class="mx-4">
            <u-form ref="form1" label-width="160rpx">
                <u-form-item label="手机号">
                    <u-input v-model="form.phone" placeholder="请选择" />
                </u-form-item>
                <u-form-item label="验证码" borderBottom>
                    <view class="flex">
                        <u-input
                            class="flex-1"
                            v-model="form.mobileCode"
                            placeholder="请输入验证码"
                            :border="false"
                        />
                        <view @click="sendSms">
                            <u-verification-code
                                ref="uCodeRef"
                                :seconds="60"
                                @change="codeChange"
                                change-text="x秒"
                            />
                            {{ codeTips }}
                        </view>
                    </view>
                </u-form-item>
                <!-- <u-form-item label="密码">
                    <u-input v-model="form.password" placeholder="请选择" />
                </u-form-item>
                <u-form-item label="确认密码">
                    <u-input v-model="form.password2" placeholder="请选择" />
                </u-form-item> -->
                <u-form-item label="活动城市" right-icon="arrow-right">
                    <u-input v-model="picker.cityName"  disabled placeholder="请选择" @click="picker.regionShow = true"/>
                </u-form-item>
            </u-form>
            <view class="card">
                <view class="price">￥148</view>
                <view class="day">12个月</view>
            </view>
            <view class="tips">支付后会获得366天的会员，会员期内可以参加所有线下共读活动，加入读书会社群及使用平台所有功能。</view>
            <view class="mt-[40rpx]">
                <u-checkbox-group>
                    <u-checkbox v-model="isAgree" label-size="26rpx">
                        我同意并了解
                        <text class="c-cyan" @click.stop="showAgree">《用户协议》</text>、
                        <text class="c-cyan" @click.stop="showAgree">《隐私协议》</text>、
                        <text class="c-cyan" @click.stop="showAgree">《会员服务协议》</text>
                    </u-checkbox>
                </u-checkbox-group>
            </view>
            <view class="mt-[40rpx]">
                <u-button class="btn-cyan-gradient" shape="circle" :loading="btnLoading" @click="submitForm"> 立即付费注册 </u-button>
            </view>
        </view>
        <u-picker v-model="picker.regionShow" :params="picker.regionParams" mode="region" @confirm="getRegion"></u-picker>
    </view>
</template>
<script setup lang="ts">
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import { useAppStore } from '@/stores/app'
let appStore = useAppStore();
const uCodeRef = shallowRef()
const codeTips = ref('')
const form = reactive({
    phone: '',
    mobileCode: '',
    password: 'Bookclub88888888',
    password2: 'Bookclub88888888',
    inviterCode: '',
    adCode: '',
});
let isAgree = ref(false);
let btnLoading = ref(false);
let picker = reactive({
    regionParams:{
        province: true,
	    city: true,
        area: false
    },
    regionShow: false,
    cityName: null,
    cityId: null,
});
const codeChange = (text: string) => {
    codeTips.value = text
};
const sendSms = () => {
    if(!proxy.$verify.mobile(form.phone)){
        return false;
    }
    if (uCodeRef.value?.canGetCode) {
        proxy.$http('get', '/app/appmobile/'+ form.phone, {}, (data,msg) => {
            uni.$u.toast('发送成功')
            uCodeRef.value?.start()
        });
    }
};
const getRegion = val => {
    picker.cityId = val.city.code;
    picker.cityName = val.city.name;
    form.adCode = val.city.code;
};
const showAgree = () => {
    uni.showModal({
        title: '知情同意书',
        content: '这是一个模态弹窗',
        confirmText: '同意',
        success: function (res) {
            if (res.confirm) {
                isAgree.value = true;
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
}
const verifyForm = () => {
    if(!proxy.$verify.mobile(form.phone)){
        return false;
    }
    if(!proxy.$verify.null(form.mobileCode, '请输入验证码')){
        return false;
    }
    if(!isAgree.value){
        uni.$u.toast('请勾选并同意并了解《用户协议》、《隐私协议》、《会员服务协议》');
        return false;
    }
    return true;
};
const submitForm = () => {
    // if(!verifyForm()){
    //     return;
    // }
    // proxy.$http('post', '/app/appuser/register', form, (data,msg) => {
    //     toPay(data.userId);
    // });
    toPay('1889590800925978626');
};
const toPay = (userId:any) => {
	uni.login({
		success: response => {
            console.log(response);
            let params  = {
                body: 'new', // new新开卡，xu续费
                userId: userId,
                cardId: 772370433,
                code: response.code
            };
            appStore.wechatPay(params).then(res => {
                uni.requestPayment({
                    provider: 'wxpay',
                    ...res,
                    success: successRres => {
                    proxy.$util.gotoPage('/pages/home/index');

                    }, 
                    error: err => {
                    
                    }
                })
            })			
		},
		fail: () => {
			reject()
		}
	})
    
}
</script>
<style>
page{height:100%;}
</style>